<template>
  <el-form>
    <template v-if="item?.data.type == 'text'">
      <el-form-item label="文字">
        <el-input type="textarea" v-model="item.data.text" autosize @input="(e) => onChange(e, 'text')"></el-input>
      </el-form-item>
      <el-form-item label="字号">
        <el-input v-model="item.data.fontSize" @input="(e) => onChange(e, 'fontSize')"></el-input>
      </el-form-item>
      <el-form-item label="颜色">
        <el-color-picker v-model="item.data.fill" @change="(e) => onChange(e, 'fill')" :show-alpha="true"></el-color-picker>
      </el-form-item>
    </template>
    <el-form-item label="图片上传" v-if="item.data.type == 'image'">
      <el-upload :before-upload="changeImg">
        <img :src="item.data.src" alt="" style="max-width:100px" />
      </el-upload>
    </el-form-item>
    <template v-if="item.data.type == 'rect'">
      <el-form-item label="宽度">
        <el-input-number v-model="item.data.width" @input="(e) => onChangeRect(e, 'width')"></el-input-number>
      </el-form-item>
      <el-form-item label="高度">
        <el-input-number type="number" v-model="item.data.height" @input="(e) => onChangeRect(e, 'height')"></el-input-number>
      </el-form-item>
      <el-form-item label="颜色">
        <el-color-picker v-model="item.data.fill" @change="(e) => onChange(e, 'fill')" :show-alpha="true"></el-color-picker>
      </el-form-item>
    </template>
    <el-form-item label="是否可选">
      <el-radio-group v-model="item.config.selectable" @change="(e) => onSelectable(e)">
        <el-radio :value="1">可选</el-radio>
        <el-radio :value="0">不可选</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="下间距">
      <el-input v-model.number="item.config.mb" @input="onChangeMb"></el-input>
    </el-form-item>
    <slot></slot>
  </el-form>
</template>
<script>
import { scaleImgFit } from './component.js'
import { ref, computed } from 'vue'
export default {
  props: ['item'],
  data() {
    return {
      ec: null,
      list: []
    }
  },
  computed: {
    isInGroup() {
      return this.item.parent.type == 'group'
    },
    groups() {
      return this.list.filter((res) => res.type == 'group')
    }
  },
  mounted() {
    //console.log(this.item, 'item')
  },
  methods: {
    onSelectable(e) {
      this.item.update({
        selectable: e == 1
      })
      this.item.discardActive()
    },
    onChange(e, type) {
      this.item.update({
        [type]: e
      })
      console.log(`背景色`, this.item)
    },
    onChangeRect(e, type) {
      console.log(e, type)
      this.item.update({
        [type]: parseInt(e)
      })
    },
    onChangeMb() {
      this.item.update()
    },
    changeImg(file) {
      let fr = new FileReader()
      fr.readAsDataURL(file)
      let root = this.item.getRoot()
      fr.onload = (e) => {
        let result = e.target.result
        scaleImgFit(result, {
          width: root.canvas.width,
          height: root.canvas.height
        }).then((res) => {
          this.item.update({
            src: result,
            ...res
          })
        })
      }
      return false
    },
    moveToGroup(e) {
      let root = this.item.getRoot()
      root.addElemToGroup(this.item, e)
    }
  },
  unmounted() {
    //if (this.ec.off) this.ec.off('update', this.handlerChangeGroup)
  }
}
</script>
